<template>
	<div>
		<div id="app" class="wrapper wrapper-content">
			<div class="row">
				<div>
					<div class="panel panel-primary">
						<div class="panel-body" style="padding: 0px 120px; box-sizing: border-box;">
							<el-form size="small" :model="inputForm" ref="inputForm" v-loading="loading"
								:disabled="formReadOnly">
								<div style="text-align:center">
									<h3 style="font-weight: bold;color: black;font-size:24px">提现申请单</h3>
								</div>
								<table
									style="margin:0 auto;width:80%;margin-top:20px;border-collapse: collapse;margin-bottom:20px">
									<tr style="line-height: 3.5;">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
											<img src="../../../../../assets/imgs/processManagement/work.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
											基本信息
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">申请人</td>
										<td class="width-30">
											<el-form-item prop="applyuser.id">
												<user-select :limit='1' :value="inputForm.applyuser.id"
													@getValue='(value) => {inputForm.applyuser.id=value}' disabled>
												</user-select>
											</el-form-item>
										</td>
										<td class="width-15">所属公司</td>
										<td class="width-30">
											<el-form-item prop="company.id">
												<SelectTree ref="company" :props="{
                                                  value: 'id',             // ID字段名
                                                  label: 'name',         // 显示名称
                                                  children: 'children'    // 子级字段名
                                                }" disabled url="/sys/office/treeData?type=2"
													:value="inputForm.company.id" :clearable="true" :accordion="true"
													@getValue="(value) => {inputForm.company.id=value}" />
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">申请日期</td>
										<td class="width-30">
											<el-form-item prop="applydate">
												<el-date-picker v-model="inputForm.applydate" type="datetime"
													style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"
													placeholder="请选择" disabled></el-date-picker>
											</el-form-item>
										</td>
										<td class="width-15">所属部门</td>
										<td class="width-30">
											<el-form-item prop="depart.id">
												<SelectTree ref="depart" :props="{
                                                    value: 'id',             // ID字段名
                                                    label: 'name',         // 显示名称
                                                    children: 'children'    // 子级字段名
                                                  }" disabled url="/sys/office/treeData?type=2"
													:value="inputForm.depart.id" :clearable="true" :accordion="true"
													@getValue="(value) => {inputForm.depart.id=value}" />
											</el-form-item>
										</td>
									</tr>
									<tr style="line-height: 3.5;">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
											<img src="../../../../../assets/imgs/processManagement/basic.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
											提现信息
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15"><span style="color: red">*&nbsp;</span>提现金额</td>
										<td class="width-30">
											<!-- <el-form-item  prop="money" :rules="[{required: true, message:'提现金额不能为空(保留两位小数)', trigger:'blur',pattern:/^\d*\.(\d|\d{2})$/}]"> -->
											<el-form-item prop="money"
												:rules="[{required: true, message:'提现金额不能为空(最多保留两位小数)', trigger:'blur',pattern: /^\d*\.?(\d|\d{2})$/}]">
												<el-input v-model="inputForm.money" @input="moneySwitch"></el-input>
											</el-form-item>
										</td>
										<td class="width-15">提现金额大写</td>
										<td class="width-30">
											<el-form-item prop="moneybig">
												<el-input v-model="inputForm.moneybig" disabled></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15"><span style="color: red">*&nbsp;</span>提现类型</td>
										<td class="width-30">
											<el-form-item prop="drawaltype"
												:rules="[{required: true, message:'提现类型不能为空', trigger:['blur','change']}]">
												<el-cascader placeholder="请选择" v-model="inputForm.drawaltype"
													style="width: 100%;" :props="{
                                              expandTrigger: 'hover',
                                              checkStrictly: true,
                                              label: 'name',
                                              value: 'id',
                                              children: 'children',
                                            }" :key="cascaderKey" size="small" ref="bussinessTypes"
													@change="handleChange" clearable @click.native="handleSelect"
													:popper-class="'cascader1'" :options="valueData">
												</el-cascader>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>提现事由</td>
										<td class="width-30">
											<el-form-item prop="contect"
												:rules="[{required: true, message:'提现事由不能为空', trigger:'blur'}]">
												<el-input type="text" v-model="inputForm.contect"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr style="height: 80px;line-height: 80px">
										<td class="width-15 active" style="line-height: 80px">备注
										</td>
										<td colspan="4" style="padding:0 10px">
											<el-form-item prop="remarks">
												<el-input type="text" v-model="inputForm.remarks"></el-input>
											</el-form-item>
										</td>
									</tr>
								</table>
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import UserSelect from '@/components/userSelect'
	import SelectTree from '@/components/treeSelect/treeSelect.vue'
	import tableStyles from '../../../../../utils/mixins'
	export default {
		mixins: [tableStyles],
		data() {
			return {
				title: '',
				method: '',
				loading: false,
				inputForm: {
					id: '',
					applyuser: {
						id: ''
					},
					company: {
						id: ''
					},
					applydate: '',
					depart: {
						id: ''
					},
					money: '',
					moneybig: '',
					drawaltype: '',
					contect: '',
					remarks: ''
				},
				valueData: [], //类型类目
				cascaderKey: 1,
			}
		},
		props: {
			businessId: {
				type: String,
				default: ''
			},
			formReadOnly: {
				type: Boolean,
				default: false
			}
		},
		components: {
			UserSelect,
			SelectTree
		},
		watch: {
			'businessId': {
				handler(newVal) {
					if (this.$store.state.user.id != '') {
						var users = this.$store.state.user
					} else {
						var users = JSON.parse(sessionStorage.getItem("userInfo"));
					}
					if (this.businessId) {
						this.init(this.businessId);
					} else {
						this.$nextTick(() => {
							this.$refs.inputForm.resetFields();
							this.inputForm.applyuser.id = users.id;
							this.inputForm.company.id = users.company.id;
							this.inputForm.depart.id = users.office.id;
							this.inputForm.applydate = this.getNowTime();
							this.getBusssinessType(this.$route.query.id);
						})
					}
				},
				immediate: true,
				deep: false
			}
		},
		created() {
			window.addEventListener("beforeunload", () => {
				sessionStorage.setItem("userInfo", JSON.stringify(this.$store.state.user))
			})
		},
		methods: {
			init(id) {
				if (id) {
					this.loading = true
					this.inputForm.id = id
					this.$nextTick(() => {
						this.$refs.inputForm.resetFields()
						this.$http({
							url: `/dlyrl/oa/applydrawal/applyDrawal/queryById?id=${this.inputForm.id}`,
							method: 'get'
						}).then(({
							data
						}) => {
							this.inputForm = this.recover(this.inputForm, data.applyDrawal)
							this.loading = false
						})
					})
				}
			},
			// 提现类型切换选项
			handleChange(e) {
				this.$refs.bussinessTypes.dropDownVisible = false; //监听值发生变化就关闭它
			},
			//点击label也可以进行选择
			handleSelect(event) {
				var that = this;
				this.$nextTick(() => {
					let d = document.getElementsByClassName("cascader1");
					if (d[0] && !d[0].onclick) {
						d[0].onclick = function(e) {
							if (e.target.className == "el-cascader-node__label") {
								e.target.previousElementSibling.click();
							}
						};
					}
				});
			},
			//得到类目等数据
			getBusssinessType(id) {
				this.$http({
					url: `/dlyrl/oa/claimexpenses/claimingExpenses/twoProcess`,
					method: 'get',
					params: {
						company: id,
						// company:this.$route.query.id
						// company:'484tf521yg854hg6asyg',
						// id:0
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.valueData = data.list;
					}
				})
			},
			// 提现金额大写
			moneySwitch() {
				var money = this.inputForm.money;
				var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
				//基本单位
				var cnIntRadice = new Array('', '拾', '佰', '仟');
				//对应整数部分扩展单位
				var cnIntUnits = new Array('', '万', '亿', '兆');
				//对应小数部分单位
				var cnDecUnits = new Array('角', '分', '毫', '厘');
				//整数金额时后面跟的字符
				var cnInteger = '整';
				//整型完以后的单位
				var cnIntLast = '元';
				//最大处理的数字
				var maxNum = 999999999999999.9999;
				//金额整数部分
				var integerNum;
				//金额小数部分
				var decimalNum;
				//输出的中文金额字符串
				var chineseStr = '';
				//分离金额后用的数组，预定义
				var parts;
				if (money == '') {
					this.inputForm.moneybig = chineseStr
				}
				money = parseFloat(money);
				if (money >= maxNum) {
					//超出最大处理数字
					return '';
				}
				if (money == 0) {
					chineseStr = cnNums[0] + cnIntLast + cnInteger;
				}
				//转换为字符串
				money = money.toString();
				if (money.indexOf('.') == -1) {
					integerNum = money;
					decimalNum = '';
				} else {
					parts = money.split('.');
					integerNum = parts[0];
					decimalNum = parts[1].substr(0, 4);
				}
				//获取整型部分转换
				if (parseInt(integerNum, 10) > 0) {
					var zeroCount = 0;
					var IntLen = integerNum.length;
					for (var i = 0; i < IntLen; i++) {
						var n = integerNum.substr(i, 1);
						var p = IntLen - i - 1;
						var q = p / 4;
						var m = p % 4;
						if (n == '0') {
							zeroCount++;
						} else {
							if (zeroCount > 0) {
								chineseStr += cnNums[0];
							}
							//归零
							zeroCount = 0;
							chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
						}
						if (m == 0 && zeroCount < 4) {
							chineseStr += cnIntUnits[q];
						}
					}
					chineseStr += cnIntLast;
				}
				//小数部分
				if (decimalNum != '') {
					var decLen = decimalNum.length;
					for (var i = 0; i < decLen; i++) {
						var n = decimalNum.substr(i, 1);
						if (n != '0') {
							chineseStr += cnNums[Number(n)] + cnDecUnits[i];
						}
					}
				}
				if (chineseStr == '') {
					chineseStr += cnNums[0] + cnIntLast + cnInteger;
				} else if (decimalNum == '' && money != 0) {
					chineseStr += cnInteger;
				}
				this.inputForm.moneybig = chineseStr
			},
			// 表单提交
			saveForm(callback) {
				this.$refs['inputForm'].validate((valid) => {
					if (valid) {
						this.inputForm.drawaltype = this.inputForm.drawaltypeW.join(",");
						this.loading = true
						this.$http({
							url: `/dlyrl/oa/applydrawal/applyDrawal/save`,
							method: 'post',
							data: this.inputForm
						}).then(({
							data
						}) => {
							this.loading = false;
							if (data && data.success) {
								callback(data.businessTable, data.businessId)
								this.$refs.inputForm.resetFields();
								this.inputForm.applyuser.id = this.$store.state.user.id;
								this.inputForm.company.id = this.$store.state.user.company.id;
								this.inputForm.depart.id = this.$store.state.user.office.id;
								this.inputForm.applydate = this.getNowTime();
							}
						})
					}
				})
			}
		}
	}
</script>
